<template>
  <div class="login-container">
    <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules"  :inline="true" ref="loginForm" label-position="left" label-width="76px">
      <div class="login-logo">
          <img src="../../assets/images/loginlogo.png" class="imgS"/>
      </div>
      <div class="login-con">
        <div class="errInfo"><p class="setC" v-if="istrue">{{errorInfo}}，请再次尝试。</p></div>
        <el-form-item prop="tenancyName" label="机构编码"> 
          <div class="haveTname"  v-if="tName &&change">
            <span class="icon" @click="changeTname" title="切换机构">
            <i class="el-icon-remove-outline"></i>
            </span>
           <el-input class='wd250' readonly type="text" v-model="tName" autoComplete="on" size="mini" />
           </div>
            <el-input class='wd250' name="tenancyName" v-else type="text" v-model="loginForm.tenancyName" autoComplete="on" placeholder="请输入开通账号时的机构编码" size="mini" />
        </el-form-item>
        <el-form-item prop="usernameOrEmailAddress" label="登录账户">
            <el-input class='wd250' size='mini' name="usernameOrEmailAddress" type="text" v-model="loginForm.usernameOrEmailAddress" autoComplete="on" placeholder="请输入登录名/邮箱/手机" />
        </el-form-item>
        <el-form-item prop="password" label="密　　码">
            <el-input  class='wd250' size='mini' name="password" :type="pwdType"  @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
            placeholder="请输入密码"></el-input>
            <!-- <span class="show-pwd" @click="showPwd"></span> -->
        </el-form-item>
        <div class="time5">
            <el-checkbox v-model="checked">5天内自动登录</el-checkbox>
        </div>
        <el-form-item class="subBtn">
            <el-button class='wd150' type="primary" size='mini' :loading="loading" @click.native.prevent="handleLogin">
            登　&nbsp;&nbsp;&nbsp;录
            </el-button>
            <span class="forgetPwd" @click='toForget'>忘记密码？</span>
        </el-form-item>
      </div>
      <!-- <div class="tips">
        <span style="margin-right:20px;">jinhe</span>
        <span style="margin-right:20px;">admin</span>
        <span> 123qwe</span>
      </div> -->
    </el-form>
  </div>
</template>

<script>
import { isvalidUsername } from "@/utils/validate";
import { getToken, getTenancy, setTenancy,getTenancyName,setTenancyName } from "@/utils/auth";

export default {
  name: "login",
  data() {
    const validatetenancy = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入正确的机构编码"));
      } else {
        callback();
      }
    };
    const validateUsername = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入正确的用户名"));
      } else {
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value == "" || value.length < 6) {
        callback(new Error("请输入6-18位数的密码"));
      } else {
        callback();
      }
    };
    return {
      checked: false,
      istrue: false,
      errorInfo: "",
      loginForm: {
        tenancyName: "",
        usernameOrEmailAddress: "",
        password: ""
      },
      loginRules: {
        tenancyName: [
          { required: true, trigger: "blur", validator: validatetenancy }
        ],
        usernameOrEmailAddress: [
          { required: true, trigger: "blur", validator: validateUsername }
        ],
        password: [{ required: true, trigger: "blur", validator: validatePass }]
      },
      loading: false,
      pwdType: "password",
      tName:'',
      change:false,
    };
  },
  mounted() {
    if (getTenancy()) {
      this.loginForm.tenancyName = getTenancy();
    }
    if(getTenancyName()){
      this.tName =getTenancyName();
      this.change = true;
    }
    if (getToken()) {
      this.$router.push({
        name: "home"
      });
    }
  },
  methods: {
    showPwd() {
      if (this.pwdType === "password") {
        this.pwdType = "";
      } else {
        this.pwdType = "password";
      }
    },
    toForget() {
      this.$router.push({
        name: "forgetpassword"
      });
    },
    handleLogin() {
      let datas = {};
      datas.userinfo = this.loginForm;
      datas.remember = this.checked;
      if(this.checked){
        datas.userinfo.isRemeber = 1;
      }
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("Login", datas)
            .then(res => {
              if (res.success) {
                if (res.result.tenantId) {
                  this.$router.push({
                    name: "setpaypwd",
                    params: {
                      tenantId: res.result.tenantId,
                      userId: res.result.userId,
                      resetCode: res.result.resetCode
                    }
                  });
                  this.loading = false;
                  this.istrue = false;
                  setTenancy(this.loginForm.tenancyName);
                } else {
                  console.log('///////////////////////////////////////7777');
                  this.$store.dispatch("GetInfo").then((res) => {
                    this.$router.push({ name: "home" });
                    this.loading = false;
                    this.istrue = false;
                    setTenancy(this.loginForm.tenancyName);
                    if (res.success) {
                     let tname =   res.result.tenant.tenantName;
                     setTenancyName(tname)
                    }
                    
                  });
                }
              } else {
                this.errorInfo = res.error.message;
                this.loading = false;
                this.istrue = true;
              }
              console.log("if failed why to here");
              this.loading = false;
            })
            .catch(error => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
    changeTname(){//切换用户
       this.change = false;
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
.ht28 {
  height: 28px;
}
.wd250 {
  width: 250px;
}
.login-container {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: $bg;
  .login-form {
    position: absolute;
    left: 0;
    right: 0;
    width: 400px;
    height: 397px;
    background: #ffffff;
    border-radius: 15px;
    top: 50%;
    margin-top: -199px;
    left: 50%;
    margin-left: -200px;
    .login-logo {
      height: 92px;
      text-align: center;
      // background-color:#889aa4;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
      border-bottom: 1px solid #cbd1d3;
      .imgS {
        width: 200px;
        margin: 20px;
      }
    }
    .login-con {
      padding: 0 32px 40px 30px;
      .errInfo {
        min-height: 18px;
        line-height: 18px;
        width: 260px;
        margin: 10px 0 13px 76px;
        .setC {
          font-size: 13px;
          color: #cf1322;
          margin: 0;
        }
      }
      .time5 {
        margin-left: 76px;
        width: 250px;
        line-height: 17px;
        height: 17px;
        margin-bottom: 25px;
      }
      .subBtn {
        margin: 0 0 0 76px;
        .wd150 {
          width: 150px;
        }
        .forgetPwd {
          font-size: 12px;
          color: #027dca;
          margin-left: 36px;
          cursor: pointer;
        }
      }
    }
  }
  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }
}
.haveTname{
  position: relative;
  .icon{
    position:absolute;
    right:0;
    top:0;
    width:28px;
    height:28px;
    text-align: center;
    z-index: 22;
    display: block;
    cursor: pointer;
    i{
      color: #ddd;
        font-size:16px;
    }
    i:hover{
    color: #027dca;
  }
  }
  
}

// .el-form--inline .el-form-item__label{
//     line-height: 28px;
//     vertical-align: top;
// }
// .el-form-item.is-required .el-form-item__label:before{
//     content:'';
// }
</style>

